<template>

	<view class="container">
		<u-toast ref="uToast" />
		<image src="../../static/login.jpg" mode="" style="width:180px;height: 180px;"></image>
		<view>
			<input v-model="userName" class="yonghu" placeholder="请输入用户名" />
		</view>
		<view>
			<input v-model="password" class="mima" placeholder="请输入密码" />
		</view>
		<!-- <view @click="login" class="login">登录</view> -->
		<button @click="login" style="color:#FFFFFF;background-color: #007AFF;" class="login" type="default">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: "",
				password: "",
				USER_INFO: {
					userName: "",
					password: ""
				}
			}
		},
		onLoad() {
			const user = uni.getStorageSync("USER_INFO");
			if (user.token != null) {
				uni.switchTab({
					url: '../self/self'
				})
			}
		},
		methods: {
			login() {
				uni.request({
					url: this.$url + '/mobile/login',
					method: 'POST',
					data: {
						userName: this.userName,
						password: this.password
					},
					success: (res) => {
						console.info("发送请求的返回值", res.data)
						if (res.data.success == true) {
							if (res.data.data != null && res.data.data.token != null) {
								//添加缓存（同步添加，需要等待）
								try {
									uni.setStorageSync("USER_INFO", res.data.data);
									console.log("已存入缓存对象", )
								} catch (e) {
									console.log("存入缓存时出现错误！！")
								}
								//跳转页面
								this.$refs.uToast.show({
									title: '登录成功',
									url: '/pages/self/self',
									type: 'success',
									position: "bottom",
									isTab: 'true',
									duration: 500
									// callback :
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.message,
							});
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	,
	.container image {
		width: 200rpx;
		height: 200rpx;
		margin-top: 20%;
		border-radius: 50%;
	}

	,
	.yonghu {
		width: 560rpx;
		height: 88rpx;
		margin-top: 100rpx;
		background-color: rgb(238, 238, 238);
		padding-left: 30rpx;
		border-radius: 50rpx;
		box-shadow: 2rpx 2rpx 10rpx 0rpx #dfdee3;
	}

	,
	.mima {
		width: 560rpx;
		height: 88rpx;
		margin-top: 50rpx;
		background-color: rgb(238, 238, 238);
		padding-left: 30rpx;
		border-radius: 50rpx;
		box-shadow: 2rpx 2rpx 10rpx 0rpx #dfdee3;
	}

	,
	.login {
		margin-top: 50rpx;
		height: 88rpx;
		width: 583rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 88rpx;
		box-shadow: 0rpx 5rpx 10rpx #a2a2a2;
	}
</style>
